<template>
    <div class="group">
        <div class="group-goods">
            <div v-for="(item, key) in groupList"
                 :key="key"
                 class="group-good-single"
            >
                <img :src="item.pic" @click="toDetail(item)" v-lazy="item.pic"/>
                <div class="good-name">{{item.name}}</div>
                <div class="good-desc">
                    <div class="good-price">
                        <span>{{item.price | moneyFmt(2, '￥')}}</span>
                        <del>{{item.money | moneyFmt(2, '￥')}}</del>
                    </div>
                    <div class="pintuan-icon" @click="buy(item)">
                        <svg class="icon pintuan" aria-hidden="true">
                            <use xlink:href="#icon-pintuan"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <infinite-loading  :identifier="infiniteId"
                           @infinite="getGroupList"
                           spinner="circles"
        >
        </infinite-loading>
        <group-spec :pro-content="specGood"
                    operation="initiate"
                    ref="fspec"
                    @chooseDone="specChooseOk"
                    v-if="specGood.key"
        />
    </div>
</template>

<script>
    import API from '../../request/api'
    import GroupSpec from "../../components/Online/group-spec";
    export default {
        components: {GroupSpec},
        name: "group-goods",
        data(){
            return{
                groupList: [],
                specGood:{},//显示规格弹窗的数据
                infiniteId: +new Date(), // 该值改变后重新调用handler方法
                pageIndex: 0,
                pageSize: 20,
            }
        },
        computed: {
            isLogin() {
                let userInfo = this.$store.state.login.userInfo;
                let login = !!userInfo.role;
                console.log('login:', login, userInfo);
                return login;
            },
            systemId() {
                return this.$store.state.login.system;
            },
        },
        created(){
            // this.getGroupList()
        },
        methods:{
            getGroupList($state){
                this.request.get(API.getGroupShopGoods, {
                    page: this.pageIndex,
                    size: this.pageSize
                }).then((res) => {
                    console.log('getGroupShopGoods', res.length);
                    if (res.length) {
                        this.pageIndex += 1;
                        this.groupList.push(...res);
                        $state.loaded();
                        if (res.length < this.pageSize) {
                            $state.complete();
                        }
                    } else {
                        $state.complete();
                    }
                }).catch((err) => {
                    console.error('getGroupShopGoods-err', err);
                });
            },
            toDetail(good){
                this.$router.push({
                    name: 'group-detail',
                    query:{
                        gid: good.gid
                    }
                })
            },
            buy(good){
                this.specGood = {};
                this.request.get(API.frontGetMiniGood,{
                    gid: good.gid
                }).then((res) =>{
                    console.log('frontGetMiniGood', res);
                    this.goodId = good.gid;
                    this.specGood = res;
                    setTimeout(()=>{
                        // console.log('that.$refs',that.$refs)
                        this.$refs.fspec.show()
                    },5)
                }).catch((err) => {
                    console.error('frontGetMiniGood-err',err);
                });
            },
            specChooseOk(sku){
                console.log('SKUSKU', sku)
                sku.system = this.$store.state.login.system;
                sku.gid = this.goodId;
                if (this.isLogin) {
                    if (sku.buyid) {
                        let requestArr = [];
                        let requestJson = {};
                        requestJson.buyid = sku.buyid;
                        requestJson.gid = sku.gid;
                        requestJson.num = sku.count;
                        // requestJson.sale = sku.sale;
                        requestArr.push(requestJson);
                        let orderData = {
                            data: requestArr,
                            type: 4,
                            groupid: '1',
                        };
                        console.log('requestJson', requestJson, requestArr);
                        console.log('skusku', sku);
                        this.$store.commit('dataCreateOrder', orderData);
                        this.$router.push({
                            name: 'order-created'
                        });
                    }
                } else {
                    this.$router.push({
                        name: 'login',
                        query: {
                            direct: 'order-created'
                        }
                    })
                }
            },

        }
    }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
    @import '~@/assets/main.styl'
    .group-goods{
        display flex
        flex-wrap wrap
        flex-direction row
        justify-content space-between
        overflow hidden
    }
    .group-good-single{
        width vw(185)
        background-color grayF
        height vw(245)
        margin-top titleMargin
        img{
            width vw(185)
            height vw(185)
        }
    }
    .good-name{
        padding 0 smallMargin
        margin-top smallMargin
        word-vw(word12, gray3)
        line-height vw(16)
        text-align left
        ellipsis()
    }
    .good-desc{
        padding 0 smallMargin
        display flex
        justify-content space-between
        .pintuan-icon{
            svg{
                width vw(25)
                height vw(25)
                display flex
                justify-content center
                align-items center
                margin-top vw(2)
                fill main-color
            }
        }
    }
    .good-price{
        margin-top smallMargin
        word-vw(word12, main-color)
        line-height vw(16)
        text-align left
        overflow hidden
        del{
            font-size vw(10)
            color gray9
            line-height vw(14)
            margin-left smallMargin
        }
    }
</style>